<template>
  <view class="form">
    <view class="formINFO">
      formModel: {{ formModel }}
      <base-form
        v-model="formModel"
        :labelWidth="100"
        :formList="formList"
        :btnMessage="btnMessage"
        @submit="submit"
      >
        <view slot="testSlot"> 这里可以是一个未定义的组件 </view>
        <view slot="testSlot1"> 这里可以是一个未定义的组件1 </view>
      </base-form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formModel: {
        name: "",
        userPicker: "",
        datetime: "",
        picker: "",
        textarea: "",
      },
      btnMessage: {
        state: true,
        cancels: "上一步",
        submit: "下一步",
      },
      formList: [
        {
          type: "input",
          label: "输入框",
          model: "name",
          borderBottom: true,
        },
        {
          type: "textarea",
          label: "输入框",
          model: "textarea",
          borderBottom: true,
        },
        {
          type: "textarea",
          label: "输入框",
          model: "name1",
          borderBottom: true,
        },
        {
          type: "slot",
          slotName: "testSlot",
          label: "slot",
          model: "slot",
        },
        {
          type: "userPicker",
          label: "userPicker",
          model: "userPicker",
        },
        {
          type: "deptPicker",
          label: "部门选择",
          model: "deptPicker1111",
        },
        {
          type: "upload",
          label: "上传",
          url: "http://192.168.124.121:8101/common/upload",
          model: "uploadFile",
          multiple: true,
        },
        {
          type: "picker",
          label: "单列",
          model: "picker",
          text: "",
          borderBottom: true,
          show: false,
          columns: [
            [
              {
                label: "中国",
                id: 1,
              },
              {
                label: "美国",
                id: 2,
              },
            ],
          ],
        },
        {
          type: "datetime",
          label: "时间选择",
          mode: "date",
          model: "datetime",
          borderBottom: true,
          show: false,
        },
      ],
    };
  },
  methods: {
    submit() {
      // dosometing
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  height: 100vh;
  overflow-y: auto;
  background: #f6f6f6;
  padding: 60rpx 30rpx;

  .formINFO {
    box-sizing: border-box;
    padding: 0 25rpx;
    border-radius: 8px;
    background: #fff;
  }
}
</style>
